<template>
  <div class="order">
    <!-- 返回按钮 -->
    <VueMovieComeBack title="订单列表" :Home="home" />
  
    <div v-if="show">
      <van-skeleton title avatar :row="3" />
    </div>
    <div v-else class="item" v-for="(item, index, id) in orderList" :key="id">
       <van-card
       tag="hot"
  :num="1 "
  :price="35"
  :desc="`${item.star} `"
  :title="`${item.nm}`"
  :thumb="`${item.img}`"
   origin-price="99"
>
  
  <template #footer>
   
    <van-button color="red" size="mini" @click="deleteList(index)">删除</van-button>
  </template>
</van-card>
     
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
import { mapState } from "vuex";
import VueMovieComeBack from "@/components/common/come_back.vue";
import VueMovieFilmTitleDetail from "@/components/detail/film_title_detail.vue";
export default {
  name: "VueMovieOrderPageList",
  components: { VueMovieFilmTitleDetail, VueMovieComeBack },
  data() {
    return {
      show: true,
      home: true,

    };
  },

  mounted() {
    setTimeout(() => {
      for (let i = 0; i < this.orderList.length; i++) {
        const element = this.orderList[i];
        if (element.price <= 0) {
          this.orderList.splice(element, 1);
          i--;
        }
      }
      if (this.orderList == undefined || this.orderList.length == 0) {
        Toast("暂无订单");
        this.$router.go("-1");
      }
      this.show = !this.show;
    }, 1500);
  },
  computed: {
    ...mapState(["orderList"]),
  },
  methods: {
    deleteList(i) {
      Toast.loading({
        message: "正在删除..",
        forbidClick: true,
      });
      setTimeout(() => {
        this.$store.commit("DELETEORDER", i);
        Toast("删除成功");
      }, 1500);
    },
    todetail(id) {
      this.$router.push({ path: "/detail/" + id });
    },
  },
};
</script>

<style lang="less" scoped>
.order {
  min-height: 100vh;
  padding: 10px;
  background-color: #2c1c1e;
  .item {
    margin-bottom: 10px;
    border-radius: 5px;
   background:#fafafa;
    opacity: .8;
    .movie {
      height: 125px;
      border-radius: 5px;
      margin-bottom: 20px;
    
      h3,
      p {
        color: #000;
        font-weight: 700;
        
        margin: 0;
        padding: 0;
        font-size: 12px;
        font-weight: 350;
        margin-top: 5px;
        text-align: left;
      }
      h3 {
        font-size: 16px;
        font-weight: 400;
        margin: 0;
      }

      .van-col:nth-child(1) {
        padding: 5px;
        height: 120px;
        border-radius: 5px;
        overflow: hidden;
      }
      .van-col:nth-child(2) {
        padding: 5px;
      }
      .van-col img {
        width: 100%;
        height: 115px;
        border-radius: 5px;
      }
    }
    p {
      text-align: right;
      margin-top: -20px;
      padding: 5px 10px 10px 0;
      font-size: 15px;
      span {
        color: red;
      }
    }
    .delet {
      .van-col {
        text-align: center;
        .van-button {
          height: 35px;
          margin-bottom: 5px;
        }
      }
      .van-col:nth-child(1) {
        padding-top: 10px;
        font-size: 12px;
        padding-left: 15px;
        text-align: left;
      }
    }
  }
}
</style>